<template>
  <div class="majorPage">
    <view class="my_content">
      <view class="my_yiyle">
        <uv-image
          src="https://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png@1280w_1l_2o_100sh.png"
          width="115rpx"
          height="115rpx"
          shape="circle"
        ></uv-image>
        <view>
          <view class="click">{{userInfo.welderName}}（工号： {{userInfo.welderNo}}）</view>
          <view style="font-size: 20rpx; width: 90%; color: #666" class="click2"
            >项目名称：陕西龙华集团煤业科技发展有限公司煤炭分级分质清洁高效综合利用项目</view
          >
        </view>
      </view>

      <view class="craterBox">
        <image
          style="width: 28rpx; height: 28rpx"
          widthFix="20rpx"
          height="20rpx"
          src="../static/g1.png"
        ></image>
        &nbsp; 管线号：{{ craterDetailData.pipeLine || '123' }}
      </view>
    </view>

    <view style="position: relative" class="content">
      <view
        style="
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          padding: 20rpx;
          font-size: 23rpx;
          font-weight: bolder;
          width: 180rpx;
          background-color: white;
          z-index: 999;
        "
      >
        <image
          style="width: 25rpx; height: 25rpx"
          src="/static/Declawing.png"
          mode="scaleToFill"
        />
        &nbsp; 焊口列表
      </view>
      <uv-vtabs
        :current="currentIndex"
        :height="tabHeihgt"
        barWidth="180rpx"
        :chain="false"
        :list="list"
        :barItemBadgeStyle="{ right: '20px', top: '12px' }"
        @change="change"
      >
        <uv-vtabs-item>
          <view class="content_vtabs">
            <uv-notice-bar
              :customStyle="{
                width: '100%',
                borderRadius: '20rpx',
                color: '#3c9cff',
                fontSize: '20rpx',
              }"
              text="注意！必须将所有值填写完整后保存....."
            ></uv-notice-bar>
          </view>
          <view class="formData">
            <view class="title">
              <image
                style="height: 40rpx; width: 40rpx"
                height="30rpx"
                width="30rpx"
                src="../static/hj.png"
              ></image>
              &nbsp; 焊口数据
            </view>
            <div style="position: relative">
              <image
                @click="scanER"
                v-if="bindER"
                style="
                  height: 100rpx;
                  width: 90rpx;
                  position: absolute;
                  top: 0rpx;
                  right: 0rpx;
                "
                src="../static/er0.png"
              ></image>

              <image
                v-if="!bindER"
                style="
                  height: 90rpx;
                  width: 100rpx;
                  position: absolute;
                  top: 20rpx;
                  right: 20rpx;
                "
                src="../static/er1.png"
              ></image>
              <uv-form
                labelWidth="180rpx"
                labelPosition="top"
                :model="modelData"
                :rules="rules"
                ref="form"
              >
                <uv-form-item label="焊口号：" prop="num" borderBottom>
                  <uv-input
                    disabled
                    customStyle="pointer-events: none;"
                    placeholder="请输入姓名焊口号"
                    v-model="modelData.weldNum"
                    border="none"
                  >
                  </uv-input>
                </uv-form-item>

                <uv-form-item
                  label="焊工姓名"
                  prop="weldingPosition"
                  borderBottom
                  @click="select4"
                >
                  <uv-input
                    v-model="modelData.welderName"
                    disabled
                    disabledColor="#ffffff"
                    placeholder="请选择焊工姓名"
                    border="none"
                  >
                  </uv-input>
                  <template v-slot:right>
                    <uv-icon name="arrow-right"></uv-icon>
                  </template>
                </uv-form-item>

                <uv-form-item label="规格：" prop="specification" borderBottom>
                  <uv-input
                    placeholder="请输入规格"
                    v-model="modelData.specification"
                    border="none"
                  >
                  </uv-input>
                </uv-form-item>
                <uv-form-item
                  label="焊材牌号"
                  prop="weldingPosition"
                  borderBottom
                  @click="select1"
                >
                  <uv-input
                    v-model="modelData.rodName"
                    disabled
                    disabledColor="#ffffff"
                    placeholder="请选择焊材牌号"
                    border="none"
                  >
                  </uv-input>
                  <template v-slot:right>
                    <uv-icon name="arrow-right"></uv-icon>
                  </template>
                </uv-form-item>

                <uv-form-item
                  label="焊接位置"
                  prop="weldingPosition"
                  borderBottom
                  @click="select2"
                >
                  <uv-input
                    v-model="modelData.posName"
                    disabled
                    disabledColor="#ffffff"
                    placeholder="请选择焊材牌号"
                    border="none"
                  >
                  </uv-input>
                  <template v-slot:right>
                    <uv-icon name="arrow-right"></uv-icon>
                  </template>
                </uv-form-item>

                <uv-form-item
                  label="焊接方式"
                  prop="weldingPosition"
                  borderBottom
                  @click="select3"
                >
                  <uv-input
                    v-model="modelData.methodName"
                    disabled
                    disabledColor="#ffffff"
                    placeholder="请选择焊接方式"
                    border="none"
                  >
                  </uv-input>
                  <template v-slot:right>
                    <uv-icon name="arrow-right"></uv-icon>
                  </template>
                </uv-form-item>

                <uv-form-item
                  @click="showDateSelect"
                  label="焊接日期："
                  prop="date"
                  borderBottom
                >
                  <uv-input
                    disabled
                    disabledColor="#fff"
                    placeholder="请选择"
                    v-model="modelData.weldTime"
                    border="none"
                  >
                  </uv-input>
                  <template #right>
                    <uv-icon name="arrow-right"></uv-icon>
                  </template>
                </uv-form-item>

                <uv-form-item label="管径：" prop="specification" borderBottom>
                  <uv-input
                    disabled
                    customStyle="pointer-events: none;"
                    placeholder="请输入管径"
                    v-model="modelData.diameter"
                    border="none"
                  >
                  </uv-input>
                </uv-form-item>

                <uv-form-item
                  label="达因量："
                  prop="specification"
                  borderBottom
                >
                  <uv-input
                    disabled
                    placeholder="暂无达因量"
                    v-model="modelData.din"
                    border="none"
                  >
                  </uv-input>
                </uv-form-item>

                <uv-form-item
                  label="管道等级："
                  prop="specification"
                  borderBottom
                >
                  <uv-input
                    disabled
                    customStyle="pointer-events: none;"
                    placeholder="请输入管道等级"
                    v-model="modelData.pipeSpec"
                    border="none"
                  >
                  </uv-input>
                </uv-form-item>

                <uv-form-item label="壁厚：" prop="specification" borderBottom>
                  <uv-input
                    disabled
                    customStyle="pointer-events: none;"
                    placeholder="暂无壁厚"
                    v-model="modelData.thickness"
                    border="none"
                  >
                  </uv-input>
                </uv-form-item>
              </uv-form>
            </div>
            <view
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 30rpx;
              "
            >
              <uv-button
                style=""
                :customStyle="{
                  borderRadius: '20rpx',
                  width: '200rpx',
                  fontSize: '20rpx',
                  visibility: 'hidden',
                }"
                type="error"
                text="重置"
                :plain="true"
                @click="reset"
              ></uv-button>
              <uv-button
                type="primary"
                text="提交"
                :customStyle="{
                  borderRadius: '20rpx',
                  width: '200rpx',
                  fontSize: '20rpx',
                }"
                @click="submitCater"
              ></uv-button>
            </view>
          </view>
          <view
            style="
              margin-top: 20rpx;
              padding: 20rpx;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <uv-button
              v-if="false"
              iconColor="white"
              icon="scan"
              type="success"
              text="绑定二维码"
              :customStyle="{
                borderRadius: '20rpx',
                width: '200rpx',
                fontSize: '20rpx',
              }"
              @click="scanER"
            ></uv-button>
          </view>
        </uv-vtabs-item>
      </uv-vtabs>
    </view>
    <uv-calendars ref="calendars" @confirm="confirmData" />
    <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
    <uv-picker
      @close="closePicker"
      ref="selectView1"
      :columns="selectData1"
      @confirm="selectFn1"
    >
    </uv-picker>
    <view
      v-if="showInput"
      style="
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 253px;
        width: 40%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999999;
      "
    >
      <uv-input
        placeholder="请输入内容搜索"
        shape="circle"
        border="surround"
        v-model="value_pic"
      ></uv-input>
    </view>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, watch } from "vue";
import {
  getName,
  creater,
  selectOptions4,
  selectOptions1,
  selectOptions2,
  selectOptions3,
  updateWeld,
} from "../https/api/craterPage";
import { onLoad, onUnload } from "@dcloudio/uni-app";
const instance = getCurrentInstance();
let popups12 = ref(null);
let form = ref(null);
let value_pic = ref("");
let selectView1 = ref(null);
let showInput = ref(false);
let showFn = ref(0);
let allOptions = ref([]);

let closePicker = () => {
  value_pic.value = "";
  showInput.value = false;
  selectView1.value.setIndexs([0], true);
};

let select1 = async () => {
  let res = await selectOptions1({});
  allOptions.value = res.data;
  copyDataDeep.value = JSON.parse(JSON.stringify(res.data));
  selectData1.value[0] = res.data.map((v) => {
    return v.gbModel;
  });
  showFn.value = 1;
  selectView1.value.open();
  setTimeout(() => {
    showInput.value = true;
  }, 500);
};

let select2 = async () => {
  let res = await selectOptions2({});
  allOptions.value = res.data;
  copyDataDeep.value = JSON.parse(JSON.stringify(res.data));
  selectData1.value[0] = res.data.map((v) => {
    return v.code;
  });
  showFn.value = 2;
  selectView1.value.open();
  setTimeout(() => {
    showInput.value = true;
  }, 500);
};

let select3 = async () => {
  let res = await selectOptions3({});
  allOptions.value = res.data;
  copyDataDeep.value = JSON.parse(JSON.stringify(res.data));
  selectData1.value[0] = res.data.map((v) => {
    return v.code;
  });
  showFn.value = 3;
  selectView1.value.open();
  setTimeout(() => {
    showInput.value = true;
  }, 500);
};
let copyDataDeep = ref(null);
let select4 = async () => {
  let res = await selectOptions4({});
  allOptions.value = res.data;
  copyDataDeep.value = JSON.parse(JSON.stringify(res.data));
  selectData1.value[0] = res.data.map((v) => {
    return v.welderName;
  });
  showFn.value = 4;
  selectView1.value.open();
  setTimeout(() => {
    showInput.value = true;
  }, 800);
};

let selectFn1 = (e) => {
  if (showFn.value == 1) {
    modelData.value.rodName = allOptions.value[e.indexs[0]].gbModel;
    modelData.value.rodId = allOptions.value[e.indexs[0]].id;
  }
  if (showFn.value == 2) {
    modelData.value.posName = allOptions.value[e.indexs[0]].code;
    modelData.value.posId = allOptions.value[e.indexs[0]].id;
  }
  if (showFn.value == 3) {
    modelData.value.methodName = allOptions.value[e.indexs[0]].code;
    modelData.value.methodId = allOptions.value[e.indexs[0]].id;
  }
  if (showFn.value == 4) {
    modelData.value.welderName = allOptions.value[e.indexs[0]].welderName;
    modelData.value.welderId = allOptions.value[e.indexs[0]].id;
  }
};

let selectData1 = ref([[]]);

let submitCater = async () => {
  //  let res = form.value.validate()
  //  if(res){
  //   uni.showToast({
  // 						icon: 'success',
  // 						title: '校验通过'
  // 					})
  //  }

  console.log(modelData.value);
  let obj = {
    ...modelData.value,
    weldId: weldId.value,
  };

  await updateWeld(obj);

  uni.setStorageSync("welderId", modelData.value.welderId);
  uni.setStorageSync("welderName", modelData.value.welderName);

  uni.setStorageSync("rodId", modelData.value.rodId);
  uni.setStorageSync("rodName", modelData.value.rodName);

  uni.setStorageSync("posName", modelData.value.posName);
  uni.setStorageSync("posId", modelData.value.posId);

  uni.setStorageSync("methodName", modelData.value.methodName);
  uni.setStorageSync("methodId", modelData.value.methodId);

  uni.showToast({
    icon: "none",
    title: "提交成功",
  });
};

let calendars = ref(null);

let showDateSelect = () => {
  calendars.value.open();
  uni.hideKeyboard();
};

let reset = () => {
  form.value.resetFields();
  form.clearValidate();
};

let scanER = () => {
  uni.scanCode({
    success: function (res2) {
      uni.showModal({
        title: "提示",
        content: "确定要绑定此信息吗？",
        success: async function (res) {
          if (res.confirm) {
            let res3 = await updateWeld({
              qrcode: res2.result,
              weldId: weldId.value,
            });
            if (res3.code == 200) {
              uni.showToast({
                icon: "none",
                title: "绑定成功",
              });
              bindER.value = false;
            } else {
              uni.showToast({
                icon: "none",
                title: res3.msg,
              });
            }
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  });
};

let bindER = ref(true);

let rules = {
  num: {
    type: "string",
    required: true,
    message: "请填写牌号",
    trigger: ["blur", "change"],
  },
  weldingPosition: {
    type: "string",
    required: true,
    message: "焊接位置",
    trigger: ["blur", "change"],
  },
  weldingManner: {
    type: "string",

    required: true,
    message: "焊接方式",
    trigger: ["blur", "change"],
  },
  date: {
    type: "string",

    required: true,
    message: "日期",
    trigger: ["change"],
  },
};

let modelData = ref({
  weldNum: "焊口1",
  specification: "",
  rodId: "",
  rodName: "",
  methodName: "",
  methodId: "",
  posId: "",
  posName: "",
  welderId: "",
  welderName: "",
  weldTime: null,
});

let picker = ref(null);

let initName = ref("待完成项目");

let weldId = ref("");
let change = (e) => {
  currentIndex.value = e;
 
  getListNameDetail({
    weldId: list.value[e].id,
  });
  weldId.value = list.value[e].id;
};

let confirmData = (e) => {
  const now = new Date();
  const formatTime = (value) => value.toString().padStart(2, "0");

  const hours = formatTime(now.getHours());
  const minutes = formatTime(now.getMinutes());
  const seconds = formatTime(now.getSeconds());

  modelData.value.weldTime = `${e.fulldate} ${hours}:${minutes}:${seconds}`;
};

let confirm = (e) => {
  console.log(e);
  initName.value = e.value[0];
};

let columns = ref([["待完成项目", "已完成项目"]]);
let openPicker = () => {
  picker.value.open();
};

let getListName = async (data) => {
  let res = await getName(data);
  if (res.code == 200) {
    list.value = res.data.map((v) => {
      return {
        name: `焊口：${v.name}`,
        id: v.id,
      };
    });
    getListNameDetail({
      weldId: res.data[0].id,
    });
    weldId.value = res.data[0].id;
  }
};

let getListNameDetail = async (data) => {
  let res = await creater(data);
  modelData.value = res.data;
  res.data.qrcode ? (bindER.value = false) : (bindER.value = true);
  if (!res.data.welderName) {
    if (uni.getStorageSync("welderName")) {
      modelData.value.welderName = uni.getStorageSync("welderName");
      modelData.value.welderId = uni.getStorageSync("welderId");
    }
  }
  if (!res.data.rodName) {
    if (uni.getStorageSync("rodName")) {
      modelData.value.rodName = uni.getStorageSync("rodName");
      modelData.value.rodId = uni.getStorageSync("rodId");
    }
  }
  if (!res.data.posName) {
    if (uni.getStorageSync("posName")) {
      modelData.value.posName = uni.getStorageSync("posName");
      modelData.value.posId = uni.getStorageSync("posId");
    }
  }
  if (!res.data.methodName) {
    if (uni.getStorageSync("methodName")) {
      modelData.value.methodName = uni.getStorageSync("methodName");
      modelData.value.methodId = uni.getStorageSync("methodId");
    }
  }
};

let currentIndex = ref(0);

let craterDetailData = ref({});
let tabHeihgt = ref(0);
let userInfo = ref({})
onUnload(()=>{
  console.log(123123)
  uni.setStorageSync("searchInfo","")
})
onLoad(async() => {
  userInfo.value = JSON.parse(uni.getStorageSync('useInfo'))
  wx.createSelectorQuery()
    .select(".my_content")
    .boundingClientRect((rect) => {
      tabHeihgt.value = wx.getWindowInfo().windowHeight - rect.height - 20;
    })
    .exec();
 
  if(uni.getStorageSync("searchInfo")){
    let searchInfo = JSON.parse(uni.getStorageSync("searchInfo"))
    let res = await getName({lineId:searchInfo.lineId});
  if (res.code == 200) {
    list.value = res.data.map((v) => {
      return {
        name: `焊口：${v.name}`,
        id: v.id,
      };
    });
    currentIndex.value = list.value.findIndex((v) => {
      return v.id == searchInfo.weldId;
    });

    getListNameDetail({
      weldId: searchInfo.weldId,
    });
    weldId.value = searchInfo.weldId;
  }
  }else{
    craterDetailData.value = JSON.parse(uni.getStorageSync("createDetail"));

    getListName({
    lineId: craterDetailData.value.id,
  });
  }

});

let list = ref([
  {
    name: "uv-ui简介",
  },
  {
    name: "uv-ui简介",
  },
  {
    name: "uv-ui简介",
  },
  {
    name: "uv-ui简介",
  },
  {
    name: "uv-ui简介",
  },
  {
    name: "uv-ui简介",
  },
  {
    name: "uv-ui简介",
  },
  {
    name: "uv-ui简介",
  },
  {
    name: "uv-ui简介",
  },
  {
    name: "uv-ui简介",
  },
]);

watch(value_pic, () => {
  if (showFn.value == 1) {
    let copyData = JSON.parse(
      JSON.stringify(
        copyDataDeep.value.map((v) => {
          return v.gbModel;
        })
      )
    );
    let copyDeepData = JSON.parse(JSON.stringify(copyDataDeep.value));
    if (value_pic.value) {
      selectData1.value[0] = copyData.filter((v) =>
        v.includes(value_pic.value)
      );
      allOptions.value = copyDeepData.filter((v) =>
        v.gbModel.includes(value_pic.value)
      );
    } else {
      selectData1.value[0] = copyDataDeep.value.map((v) => {
        return v.gbModel;
      });
      allOptions.value = copyDeepData;
    }
  }

  if (showFn.value == 2) {
    let copyData = JSON.parse(
      JSON.stringify(
        copyDataDeep.value.map((v) => {
          return v.code;
        })
      )
    );
    let copyDeepData = JSON.parse(JSON.stringify(copyDataDeep.value));
    if (value_pic.value) {
      selectData1.value[0] = copyData.filter((v) =>
        v.includes(value_pic.value)
      );
      allOptions.value = copyDeepData.filter((v) =>
        v.code.includes(value_pic.value)
      );
    } else {
      selectData1.value[0] = allOptions.value.map((v) => {
        return v.code;
      });
      allOptions.value = copyDeepData;
    }
  }

  if (showFn.value == 3) {
    let copyData = JSON.parse(
      JSON.stringify(
        allOptions.value.map((v) => {
          return v.code;
        })
      )
    );
    let copyDeepData = JSON.parse(JSON.stringify(copyDataDeep.value));
    if (value_pic.value) {
      selectData1.value[0] = copyData.filter((v) =>
        v.includes(value_pic.value)
      );
      allOptions.value = copyDeepData.filter((v) =>
        v.code.includes(value_pic.value)
      );
    } else {
      selectData1.value[0] = allOptions.value.map((v) => {
        return v.code;
      });
      allOptions.value = copyDeepData;
    }
  }

  if (showFn.value == 4) {
    let copyDeepData = JSON.parse(JSON.stringify(copyDataDeep.value));
    let copyData = JSON.parse(
      JSON.stringify(
        allOptions.value.map((v) => {
          return v.welderName;
        })
      )
    );
    if (value_pic.value) {
      selectData1.value[0] = copyData.filter((v) =>
        v.includes(value_pic.value)
      );
      allOptions.value = copyDeepData.filter((v) =>
        v.welderName.includes(value_pic.value)
      );
    } else {
      selectData1.value[0] = allOptions.value.map((v) => {
        return v.welderName;
      });
      allOptions.value = copyDeepData;
    }
  }
});
</script>

<style lang="scss" scoped>
.list_header_view {
  padding: 20rpx;
  padding-bottom: 0;
  font-size: 27rpx;
  font-weight: bolder;
}
.file_lefts {
}
.gx_list {
  box-shadow: 0upx 0upx 10upx #ddd;
  .item {
    .font_gx {
      font-size: 24rpx;
    }
    position: relative;
    padding: 20rpx 10rpx;

    display: flex;
    align-items: center;
    .posi_text {
      position: absolute;
      right: 10rpx;
      top: 50%;
      color: #3c9cff;
      transform: translateY(-50%);
      font-size: 22rpx;
    }
    label {
      margin-left: 20rpx;
    }
  }
  margin-top: 20rpx;
}
.input_inside {
  .input {
    width: 85%;
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  position: relative;
  z-index: 999;
}
.content_vtabs {
  width: 550rpx;
  padding: 20rpx;
}
.select_ab {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  color: #4c4c4c;
  position: absolute;
  right: 20rpx;
  top: 60rpx;
}

.my_content {
  position: relative;
  padding: 20rpx;
  background-image: linear-gradient(180deg, #9acafc, #fff);
  .click {
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 20rpx;
  }
  .click2 {
    font-size: 22rpx;
    margin-left: 20rpx;
    margin-top: 10rpx;
  }
  .my_yiyle {
    align-items: center;
    display: flex;
  }
}

.list_goods {
  padding: 20rpx;
  .prive_title {
    margin-top: 8rpx;
    padding: 0 15rpx;
  }
  .shopmall {
    margin-top: 10rpx;
    display: flex;
    color: #8d8d8d;
    font-size: 22rpx;
    margin-bottom: 20rpx;
    padding: 0 15rpx;
  }
  .margin_top_bottom {
    padding: 0 15rpx;
    margin-bottom: 8rpx;
    margin-top: 6rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .box1 {
      margin-right: 20rpx;
      border: 1px solid #ff1c23;
      width: 85rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #df0024;
      font-size: 18rpx;
    }
    .box2 {
      display: flex;
      align-items: center;
      margin-right: 20rpx;
    }
    .quan {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-right: 1px dashed #ff1c23;
      color: #df0024;
      font-size: 18rpx;
    }
    .quan2 {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-left: none;
      color: #df0024;
      font-size: 18rpx;
    }
  }
  .price_red {
    color: #ff1c23;
    font-size: 31rpx;
  }
  .price_scale {
    margin-left: 20rpx;
    color: #8d8d8d;
    font-size: 22rpx;
  }
  margin-top: 70rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    margin-bottom: 20rpx;
    width: 49%;
    border-radius: 15rpx;
    background: white;
    .item_title {
      font-size: 25rpx;
      padding: 0 15rpx;
      margin-top: 15rpx;

      align-items: center;
    }
    .span_p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
    }
    .nianhuo {
      display: inline-block;
      border-radius: 10rpx;
      vertical-align: top;
      font-size: 20rpx;
      background-image: linear-gradient(135deg, rgb(246, 175, 175), red);
      width: 54rpx;
      height: 28rpx;
      text-align: center;
      color: white;
      font-weight: bolder;
      line-height: 28rpx;
      display: inline-block;
    }
  }
}

.majorPage {
  height: 100vh;
}

.nopadding {
  padding: 0 !important;
}
.sa2 {
  padding-bottom: 30rpx;
  flex-wrap: wrap;
}
.wi {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30rpx;
  width: 25%;
}
.box_list {
  margin-top: 30rpx;
  margin-bottom: 20rpx;
  .item {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #333333ff;
    font-size: 22rpx;
    .text {
      margin-top: 10rpx;
    }
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_text_right_lef {
  margin-right: 5rpx;
}
.list_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_list {
  margin-bottom: 30rpx;
  border-radius: 30rpx;
  background: white;
  padding: 20rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  .list_right {
    color: #4c4c4cff;
    display: flex;
    align-items: center;
    font-size: 22rpx;
  }
  .list_left {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: bold;
    .my_text {
      margin-left: 10rpx;
    }
  }
}
.my_message {
  margin: 40rpx 0;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .item {
    display: flex;
    color: #4c4c4c;
    font-size: 22rpx;
    flex-direction: column;
    align-items: center;
    .tezxt {
      margin-top: 10rpx;
    }
  }
}
.my {
  min-height: 100vh;
  background: #f8f8f8;
}
.my_content {
  padding: 20rpx;
  background-image: linear-gradient(180deg, #9acafc, #fff);
  .click {
    font-size: 28rpx;
    font-weight: bold;
    margin-left: 20rpx;
  }
  .click2 {
    font-size: 22rpx;
    margin-left: 20rpx;
    margin-top: 10rpx;
  }
  .my_yiyle {
    align-items: center;
    display: flex;
  }
}

.craterBox {
  color: #3c9cff;
  font-weight: bolder;
  margin: 0 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0upx 0upx 10upx #ccc;
}

.formData {
  border-radius: 20rpx;
  box-shadow: 0upx 0upx 10upx #ccc;
  margin: 20rpx;
  padding: 20rpx;
  .title {
    font-size: 33rpx;
    margin-bottom: 30rpx;
    font-weight: bolder;
    display: flex;
    align-items: center;
  }
}
</style>
